
<template>
  <div>
    <div class="bankMain" v-if="!user||user.bankcardState!==1||isEdit">
      <p>姓名必须和身份证中填写的一致，请不要使用信用卡绑定</p>
      <!-- bankMsg -->
      <div class="bankMain-ul">
        <ul class="clearfix">
          <li>
            <div class="bankMain-left">开户姓名</div>
            <div class="bankMain-right"><input type="text" v-model.trim="submit.acountName" placeholder="请输入开户姓名" disabled/></div>
          </li>
          <li>
            <div class="bankMain-left">银行名称</div>
            <div class="bankMain-right"><input type="text" v-model.trim="submit.bank" placeholder="请输入银行名称"/></div>
          </li>
          <li>
            <div class="bankMain-left">开户支行</div>
            <div class="bankMain-right"><input type="text" v-model.trim="submit.acountSubbank" placeholder="请输入开户支行详细信息"/></div>
          </li>
          <!-- <li>
            <div class="bankMain-left">开户行号</div>
            <div class="bankMain-right"><input type="text" v-model.trim="submit.acountBankno" placeholder="请输入开户行号(咨询银行客服查询)"/></div>
          </li> -->
          <li>
            <div class="bankMain-left">银行账号</div>
            <div class="bankMain-right"><input type="text" placeholder="请输入转账卡号" v-model.trim="submit.bankNo"/></div>
          </li>
        </ul>
      </div>
      <!-- clear -->
      <div class="clear"></div>
      <!-- btn -->
      <div class="bankMain-btn" @click="submitInfo">确定</div>
    </div>
    <div class="bankMain-yes" v-else>
      <div class="bankMain-yes-main" v-for="(item,index) in user.buyerBankList">
        <div class="bankMain-bank">
          <div class="bankMain-yes-box">
						<span>
							<a><img src="static/imgs/mallNew1.png" alt="" title=""/></a>
							<a>{{item.bank}}</a>
						</span>
            <span class="right-color" style="color: rgb(64, 151, 255);">已绑定</span>
          </div>
        </div>
        <!-- user-bank-msg -->
        <div class="bank-msg" v-show="controllers[item.id]" >
          <div class="bankMain-yes-box" >
            <ul>
              <li>
                <a>收款人 :</a>
                <a>{{item.acountName}}</a>
              </li>
              <li>
                <a>开户银行 :</a>
                <a>{{item.acountSubbank}}</a>
              </li>
              <li>
                <a>开户行号 :</a>
                <a>{{item.acountBankno}}</a>
              </li>
              <li>
                <a>银行卡号 :</a>
                <a>{{item.bankNo}}</a>
              </li>
            </ul>
          </div>
        </div>
        <!-- btn -->
        <div class="bank-btn">
          <div class="bankMain-yes-box">
            <a v-on:click="ShowMsg(item.id)">{{controllers[item.id]?'隐藏':'显示'}}</a>
            <a v-show="controllers[item.id]" @click="edit(item)">修改</a>
          </div>
        </div>
      </div>
      <!-- anniu -->
      <div class="new-bank-link" @click="addblank">新增一个银行账户</div>
    </div>
  </div>

</template>

<script>
  import {userService} from '#/service'
  import {mapGetters,mapActions} from 'vuex'
	export default{
		name:'bindBank',
    data(){
		  return {
        controllers:{},
        MsgBoole:true,
        showText:'隐藏',
        isEdit:false,
		    submit:{
          acountBankno: "", 		//银行卡号
          acountName: "",		//姓名
          acountSubbank: "",		//开户支行
          bank: "",				//开户行
          bankNo: "",			//行号
        },
        result:{},
        rules:{
          acountName:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'姓名不能为空！'
              }
            ] ,
            value:'',
            join:'and'
          },
          // acountBankno:{
          //   rules:[
          //     {
          //       type:'inFun',
          //       rule:'required',
          //       msg:'开户行号不能为空！'
          //     },
          //   ] ,
          //   value:'',
          //   join:'and'
          // },
          acountSubbank:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'开户支行不能为空！'
              }

            ] ,
            value:'',
            join:'and'
          },
          bank:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'开户行不能为空！'
              },

            ] ,
            value:'',
            join:'and'
          },
          bankNo:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'银行卡号不能为空！'
              },

            ] ,
            value:'',
            join:'and'
          },
        },
      }
    },
    created(){
      this.submit.acountName=this.user.name;
      if(this.user.bankcardState!==1||this.$route.query.isEdit){
		    this.isEdit=true
      }
    },
    methods:{
      ...mapActions(['restUser']),
      submitInfo(){
        this.$nextTick(()=>{
          this.result=this.$valiForm.form(this.rules);
          if(this.result.adopt){
            userService.bankBind({
              data:this.submit,
              success:async ()=>{
                await this.restUser();
                this.isEdit=false
              }
            })
          }else{
            let keys=Object.keys(this.result)
            for(let i=0;i<keys.length;i++){
              if(keys[i]!=='adopt'){
                this.$toast({
                  message: this.result[keys[i]].msg,
                  position: 'middle',
                  duration: 2000
                });
                return
              }
            }
          }
        })

      },
      ShowMsg:function(id){
        this.controllers[id]=!this.controllers[id]
      },
      edit(item){
        this.submit=Object.assign(this.submit,item);
        this.isEdit=true;
      },
      addblank(){
        this.isEdit=true;
      }
    },
    watch:{
      // 'submit.acountBankno':{
      //   immediate:true,
      //   handler(newVal){
      //     this.rules.acountBankno.value=newVal
      //   },
      // },
      'submit.acountName':{
        immediate:true,
        handler(newVal){
          this.rules.acountName.value=newVal
        },
      },
      'submit.acountSubbank':{
        immediate:true,
        handler(newVal){
          this.rules.acountSubbank.value=newVal
        },
      },
      'submit.bank':{
        immediate:true,
        handler(newVal){
          this.rules.bank.value=newVal
        },
      },
      'submit.bankNo':{
        immediate:true,
        handler(newVal){
          this.rules.bankNo.value=newVal
        },
      },
      'user.buyerBankList':{
        immediate:true,
        handler(newVal){
          newVal.map((item)=>{
            if(!this.controllers[item.id]){
              this.$set(this.controllers,item.id,true)
            }
          })
        },
      }
    },
    computed:{
      ...mapGetters([
        'user'
      ])
    }
	}
</script>

<style>
  .bankMain{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .bankMain p{
    text-align: center;
    height: 0.36rem;
    line-height: 0.36rem;
    color: #b5b9bc;
    font-size: 0.1rem;
  }
  .bankMain-ul{
    width: 100%;
    height: auto;
    background: white;
  }
  .bankMain-ul ul li{
    width: 100%;
    height: 0.39rem;
    float:left;
    border-bottom: 0.01rem solid #e6e6e6;
    background: white;
  }
  .bankMain-left{
    line-height: 0.4rem;
    margin-left: 0.1rem;
    color: #b5b9bc;
    font-size: 0.12rem;
    float: left;
  }
  .bankMain-right{
    float: left;
  }
  .bankMain-right input{
    float: left;
    width: 1.7rem;
    padding: 0.13rem 0 0.13rem 0.1rem;
    font-size: 0.12rem;
  }
  .bankMain-right input::-webkit-input-placeholder {
    color: #666666;
  }
  .bankMain-btn{
    width: 90%;
    margin: 0 auto;
    height: 0.37rem;
    line-height: 0.37rem;
    background: rgb(142,10,190);
    text-align: center;
    color: white;
    font-size: 0.12rem;
    margin-top: 0.2rem;
    border-radius: 0.05rem;
  }
</style>
<style lang="stylus" scoped>
  @import "../../assets/stylus/bind.styl"
</style>
